<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" ref="ruleForm">
      <el-form-item label="游戏平台" prop="gamePlatformId">
        <el-select v-model="filters.gamePlatformId">
          <el-option
            v-for="item in GAME_PLATFORM_LIST.filter((item)=>{return item.type.includes('noticeOrderData')})"
            :key="item.value"
            :label="item.title"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="处理日期" prop="dealDate">
        <el-date-picker
          v-model="filters.dealDate"
          align="center"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务" prop="jobId">
        <el-input maxlength="20" @keyup.enter.native="doGet({action: 'getGrid'})" v-model="filters.jobId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="doGet({action: 'getGrid'})">搜索</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
      <br/>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="openDialog({dialogName:'add-notice-data'});dialogTitle='新增注单数据'">新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.list"
              v-loading="loading"
              element-loading-text="给我一点时间"
              max-height="500px"
              border
              fit
              highlight-current-row>
      <el-table-column align="center" prop="jobId" label="任务ID"></el-table-column>
      <el-table-column align="center" label="游戏平台">
        <template slot-scope="{row}">
          <span>{{row.gamePlatformId|toConverter(GAME_PLATFORM_LIST)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="处理日期">
        <template slot-scope="{row}">
          <span>{{row.dealDate|toTime('YYYY-MM-DD')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="ES数据源状态">
        <template slot-scope="{row}">
          <span>{{row.esDatasourceStatus|toConverter(DATA_ORIGIN_STATUS)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="report数据源状态">
        <template slot-scope="{row}">
          <span>{{row.reportDatasourceStatus|toConverter(DATA_ORIGIN_STATUS)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reportSkipHeader" label="跳过报表头">
        <template slot-scope="{row}">
          <span>{{row.reportSkipHeader===0?'否':row.reportSkipHeader===1?'是':'--'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reportBetIdCols" label="报表注单号所在列"></el-table-column>
      <el-table-column align="center" prop="reportBetAmountCols" label="报表有效投注金额所在列"></el-table-column>
      <el-table-column align="center" prop="reportBetWinlossCols" label="报表输赢所在列"></el-table-column>
      <el-table-column align="center" label="http数据源状态">
        <template slot-scope="{row}">
          <span>{{row.httpDatasourceStatus|toConverter(DATA_ORIGIN_STATUS)}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="http查询开始时间">
        <template slot-scope="{row}">
          <span>{{row.httpQueryStartTime|toTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="httpQueryEndTime" label="http查询截止时间">
        <template slot-scope="{row}">
          <span>{{row.httpQueryEndTime|toTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="{row}">
          <span>{{row.createTime|toTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button type="text" @click="deleteData(row.jobId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible"
            :title="dialogTitle"
               custom-class="add_notice_data_dialog"
            v-if="dialogVisible&&dialogName"
            :before-close="()=>{dialogVisible=false}"
    >
      <add-notice-data @callBack="callBack"></add-notice-data>
    </el-dialog>
  </div>
</template>

<script>
import { grid, form, dialog } from '@/build';
import { GAME_PLATFORM_LIST, DATA_ORIGIN_STATUS } from './data';
import {
  getNoticeDataList as getTableList,
  deleteNoticeData as deleteRowData,
} from '@/services/api/gameDataManage';
import AddNoticeData from './dialog/addNoticeData';

export default {
  name: 'noticeOrderData',
  mixins: [grid, form, dialog],
  components: {
    AddNoticeData,
  },
  data() {
    return {
      GAME_PLATFORM_LIST,
      DATA_ORIGIN_STATUS,
      filters: {
        gamePlatformId: undefined,
        dealDate: undefined,
        jobId: undefined,
        page: 1,
        size: 20,
      },
      tableData: {
        list: [],
        total: 0,
      },
    };
  },
  methods: {
    callBack(bool) {
      this.dialogVisible = false;
      if (bool) {
        this.doGet({ action: 'getGrid' });
      }
    },
    deleteData(jobId) {
      this.$confirm('您确定要删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          deleteRowData({
            jobId,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({ action: 'getGrid' });
              this.$message({
                message: '删除成功',
                type: 'success',
              });
            } else {
              this.$message({
                message: `删除失败${data.message}`,
                type: 'fail',
              });
            }
          });
        }).catch(() => {});
    },
  },
  mounted() {
    this.bindGet(getTableList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        if (data.dealDate) {
          data.dealDate += ' 00:00:00';
        }
        return data;
      },
    });
    this.getAll();
  },
};
</script>

<style scoped lang="scss">
/deep/ {
  .add_notice_data_dialog{
    width:40%;
    min-width: 600px;
  }
}
</style>
